<!-- emergency.vue -->
<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="nav-bar">
				<text class="nav-title">应急救援</text>
				<view class="nav-right">
					<image src="/static/emergency/示警.png" class="nav-icon"></image>
				</view>
			</view>
		</view>

		<!-- 地图区域 -->
		<view class="map-section">
			<!-- 微信小程序端：使用原生map组件 -->
			<!-- #ifdef MP-WEIXIN -->
			<map 
				class="map-component" 
				:latitude="mapData.latitude" 
				:longitude="mapData.longitude"
				:markers="mapData.markers"
				:scale="mapData.scale"
				:show-location="true"
				:enable-zoom="true"
				:enable-scroll="true"
				:enable-rotate="true"
				@markertap="onMarkerTap"
				@load="onMapLoad"
			></map>
			<!-- #endif -->
			
			<!-- H5端：使用高德地图 -->
			<!-- #ifdef H5 -->
			<div id="amap-container-emergency" class="map-component"></div>
			<!-- #endif -->
			
			<!-- App端：使用原生map组件 -->
			<!-- #ifdef APP-PLUS -->
			<map 
				class="map-component" 
				:latitude="mapData.latitude" 
				:longitude="mapData.longitude"
				:markers="mapData.markers"
				:scale="mapData.scale"
				:show-location="true"
				:enable-zoom="true"
				:enable-scroll="true"
				:enable-rotate="true"
				@markertap="onMarkerTap"
				@load="onMapLoad"
			></map>
			<!-- #endif -->
		</view>

		<!-- 服务选择标签 -->
		<view class="service-tabs">
			<view 
				class="tab-item" 
				v-for="service in serviceTypes" 
				:key="service.key"
				:class="{ active: activeTab === service.key }"
				@click="switchTab(service.key)"
			>
				{{ service.name }}
			</view>
		</view>

		<!-- 表单区域 -->
		<view class="form-section">
			<view 
				class="form-item" 
				v-for="(field, index) in formFields" 
				:key="index"
			>
				<view class="form-label">
					<view class="label-btn blue">{{ field.label }}</view>
				</view>
				<view class="form-input">
					<input 
						v-if="field.type === 'input'"
						class="input-field" 
						:placeholder="field.placeholder" 
						:value="field.value"
						:disabled="field.disabled"
						@input="onFieldInput(field.key, $event)"
					/>
					<textarea 
						v-else-if="field.type === 'textarea'"
						class="textarea-field" 
						:placeholder="field.placeholder"
						:value="field.value"
						@input="onFieldInput(field.key, $event)"
					></textarea>
					<picker 
						v-else-if="field.type === 'select'"
						:value="field.value ? field.value.id : 0"
						:range="field.options"
						range-key="displayText"
						@change="onFieldInput(field.key, $event)"
					>
						<view class="select-field">
							<text class="select-text">{{ field.value ? field.value.displayText : field.placeholder }}</text>
							<text class="select-arrow">▼</text>
						</view>
					</picker>
				</view>
			</view>
		</view>

		<!-- 呼叫救援按钮 -->
		<view class="call-rescue-section">
			<button class="call-rescue-btn" @click="callRescue">呼叫救援</button>
			<view class="rescue-records" @click="goToRescueRecords">
				<text class="records-link">救援记录 ></text>
			</view>
		</view>

		<!-- 警务救助 -->
		<view class="police-assistance-section">
			<view class="section-title">警务救助</view>
			<view class="emergency-grid">
				<view class="emergency-item" @click="callEmergency('traffic')">
					<view class="emergency-icon blue">
						<image src="/static/emergency/交通事故 拷贝.png" class="emergency-img"></image>
					</view>
					<text class="emergency-label">交通事故</text>
					<text class="emergency-number">122</text>
				</view>
				<view class="emergency-item" @click="callEmergency('fire')">
					<view class="emergency-icon orange">
						<image src="/static/emergency/火警.png" class="emergency-img"></image>
					</view>
					<text class="emergency-label">火警</text>
					<text class="emergency-number">119</text>
				</view>
				<view class="emergency-item" @click="callEmergency('medical')">
					<view class="emergency-icon purple">
						<image src="/static/emergency/急救包.png" class="emergency-img"></image>
					</view>
					<text class="emergency-label">急救中心</text>
					<text class="emergency-number">120</text>
				</view>
				<view class="emergency-item" @click="callEmergency('police')">
					<view class="emergency-icon teal">
						<image src="/static/emergency/警察,公安.png" class="emergency-img"></image>
					</view>
					<text class="emergency-label">公安报警</text>
					<text class="emergency-number">110</text>
				</view>
			</view>
		</view>
		<!-- 自定义TabBar -->
		<CustomTabbar />
	</view>
</template>

<script>
	import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
	
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				activeTab: 'jump', // 默认选中搭电
				description: '', // 描述内容
				// 服务类型配置
				serviceTypes: [
					{ key: 'jump', name: '搭电' },
					{ key: 'tire', name: '换胎' },
					{ key: 'tow', name: '拖车' }
				],
				// 用户车型数据（后期从后端获取）
				userVehicles: [
					{ id: 1, brand: '大众', model: '朗逸', plateNumber: '豫CJ4321', year: '2020', displayText: '大众 朗逸 2020 (豫CJ4321)' },
					{ id: 2, brand: '丰田', model: '卡罗拉', plateNumber: '豫A12345', year: '2019', displayText: '丰田 卡罗拉 2019 (豫A12345)' },
					{ id: 3, brand: '本田', model: '思域', plateNumber: '豫B67890', year: '2021', displayText: '本田 思域 2021 (豫B67890)' }
				],
				selectedVehicle: null, // 选中的车型
				// 基础表单数据
				formData: {
					location: '河南省焦作市山阳区32号',
					requester: '张先生',
					contact: '15523632541',
					plateNumber: '豫CJ4321',
					vehicleId: null,
					startPoint: '河南省焦作市山阳区32号',
					endPoint: '山阳区解放路66号',
					description: ''
				},
				// 地图数据
				mapData: {
					latitude: 34.824871, // 华蓝纬度
					longitude: 113.557533, // 华蓝市经度
					scale: 15, // 地图缩放级别
					markers: [
						{
							id: 1,
							latitude: 34.831625,
							longitude: 113.559059,
							title: '东史马中区',
							iconPath: '/static/emergency/椭圆 3 拷贝 2.png',
							width: 32,
							height: 32
						},
						{
							id: 2,
							latitude: 34.829222,
							longitude: 113.558713,
							title: '东史马南区',
							iconPath: '/static/emergency/椭圆 3 拷贝 2.png',
							width: 32,
							height: 32
						},
						{
							id: 3,
							latitude: 34.830723,
							longitude: 113.551424,
							title: '河工大图书馆',
							iconPath: '/static/emergency/椭圆 3 拷贝 2.png',
							width: 32,
							height: 32
						},
						{
							id: 4,
							latitude: 34.821267,
							longitude: 113.556846,
							title: '公园茂',
							iconPath: '/static/emergency/椭圆 3 拷贝 2.png',
							width: 32,
							height: 32
						}
					]
				}
			}
		},
		computed: {
			// 根据当前选中的救援类型动态生成表单字段
			formFields() {
				const baseFields = [
					{
						key: 'location',
						label: '位置',
						type: 'input',
						placeholder: '请输入当前位置',
						value: this.formData.location,
						disabled: false
					},
					{
						key: 'requester',
						label: '求助人',
						type: 'input',
						placeholder: '请输入求助人姓名',
						value: this.formData.requester,
						disabled: false
					},
					{
						key: 'contact',
						label: '联系方式',
						type: 'input',
						placeholder: '请输入联系方式',
						value: this.formData.contact,
						disabled: false
					},
					{
						key: 'vehicle',
						label: '车型',
						type: 'select',
						placeholder: '请选择车型',
						value: this.selectedVehicle,
						options: this.userVehicles,
						disabled: false
					},
					{
						key: 'description',
						label: '描述',
						type: 'textarea',
						placeholder: '请准确描述当前的状况及所需的帮助',
						value: this.formData.description,
						disabled: false
					}
				];

				// 如果是拖车服务，添加起点和终点字段
				if (this.activeTab === 'tow') {
					const towFields = [
						{
							key: 'startPoint',
							label: '起点',
							type: 'input',
							placeholder: '请输入起点',
							value: this.formData.startPoint,
							disabled: false
						},
						{
							key: 'endPoint',
							label: '终点',
							type: 'input',
							placeholder: '请输入终点',
							value: this.formData.endPoint,
							disabled: false
						}
					];
					
					// 在车型字段后插入起点和终点字段
					const vehicleIndex = baseFields.findIndex(field => field.key === 'vehicle');
					baseFields.splice(vehicleIndex + 1, 0, ...towFields);
				}

				return baseFields;
			}
		},
		methods: {
			// 切换服务标签
			switchTab(tab) {
				this.activeTab = tab;
			},
			// 表单字段输入事件
			onFieldInput(fieldKey, e) {
				if (fieldKey === 'description') {
					this.formData.description = e.detail.value;
					this.description = e.detail.value;
				} else if (fieldKey === 'vehicle') {
					// 车型选择
					this.selectVehicle(e.detail.value);
				} else {
					// 其他字段
					this.formData[fieldKey] = e.detail.value;
				}
			},
			// 选择车型
			selectVehicle(vehicleId) {
				const vehicle = this.userVehicles.find(v => v.id == vehicleId);
				if (vehicle) {
					this.selectedVehicle = vehicle;
					this.formData.vehicleId = vehicle.id;
					this.formData.plateNumber = vehicle.plateNumber;
				}
			},
			// 描述输入事件（兼容旧版本）
			onDescriptionInput(e) {
				this.description = e.detail.value;
			},
			// 呼叫救援
			callRescue() {
				// 验证必填字段
				if (!this.validateForm()) {
					return;
				}
				
				// 准备提交数据
				const submitData = this.prepareSubmitData();
				
				// 调用救援接口
				this.submitRescueRequest(submitData);
			},
			// 验证表单
			validateForm() {
				// 验证位置字段
				if (!this.formData.location || !this.formData.location.trim()) {
					uni.showToast({
						title: '请填写位置信息',
						icon: 'none'
					});
					return false;
				}
				
				// 验证求助人字段
				if (!this.formData.requester || !this.formData.requester.trim()) {
					uni.showToast({
						title: '请填写求助人姓名',
						icon: 'none'
					});
					return false;
				}
				
				// 验证联系方式字段
				if (!this.formData.contact || !this.formData.contact.trim()) {
					uni.showToast({
						title: '请填写联系方式',
						icon: 'none'
					});
					return false;
				}
				
				// 验证车型选择
				if (!this.selectedVehicle) {
					uni.showToast({
						title: '请选择车型',
						icon: 'none'
					});
					return false;
				}
				
				// 验证描述字段
				if (!this.formData.description || !this.formData.description.trim()) {
					uni.showToast({
						title: '请填写问题描述',
						icon: 'none'
					});
					return false;
				}
				
				// 如果是拖车服务，验证起点和终点
				if (this.activeTab === 'tow') {
					if (!this.formData.startPoint || !this.formData.startPoint.trim()) {
						uni.showToast({
							title: '请填写起点',
							icon: 'none'
						});
						return false;
					}
					if (!this.formData.endPoint || !this.formData.endPoint.trim()) {
						uni.showToast({
							title: '请填写终点',
							icon: 'none'
						});
						return false;
					}
				}
				
				return true;
			},
			// 准备提交数据
			prepareSubmitData() {
				const data = {
					serviceType: this.activeTab, // 救援类型：jump(搭电), tire(换胎), tow(拖车)
					location: this.formData.location,
					requester: this.formData.requester,
					contact: this.formData.contact,
					vehicleId: this.formData.vehicleId,
					plateNumber: this.formData.plateNumber,
					vehicleInfo: this.selectedVehicle ? {
						brand: this.selectedVehicle.brand,
						model: this.selectedVehicle.model,
						year: this.selectedVehicle.year
					} : null,
					description: this.formData.description,
					timestamp: new Date().toISOString(),
					status: 'pending' // 救援状态：pending(待处理), processing(处理中), completed(已完成), cancelled(已取消)
				};
				
				// 如果是拖车服务，添加起点和终点
				if (this.activeTab === 'tow') {
					data.startPoint = this.formData.startPoint;
					data.endPoint = this.formData.endPoint;
				}
				
				return data;
			},
			// 提交救援请求
			submitRescueRequest(data) {
				// 显示加载状态
				uni.showLoading({
					title: '提交中...'
				});
				
				// 模拟API调用 - 后期替换为真实接口
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '救援请求已发送',
						icon: 'success'
					});
					
					// 这里可以添加成功后的逻辑，比如跳转页面或重置表单
					console.log('提交的数据:', data);
					
					// 成功后重置表单
					this.resetForm();
				}, 1500);
				
				// 后期真实接口调用示例：
				/*
				uni.request({
					url: 'your-api-endpoint/rescue',
					method: 'POST',
					data: data,
					success: (res) => {
						uni.hideLoading();
						if (res.data.success) {
							uni.showToast({
								title: '救援请求已发送',
								icon: 'success'
							});
							// 成功后重置表单
							this.resetForm();
						} else {
							uni.showToast({
								title: res.data.message || '提交失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，请重试',
							icon: 'none'
						});
						console.error('API调用失败:', err);
					}
				});
				*/
			},
			// 重置表单
			resetForm() {
				// 重置可编辑字段
				this.formData.description = '';
				this.description = '';
				this.selectedVehicle = null;
				this.formData.vehicleId = null;
				
				// 重置基础信息字段（保持默认值，但清空用户输入）
				this.formData.location = '河南省焦作市山阳区32号';
				this.formData.requester = '张先生';
				this.formData.contact = '15523632541';
				this.formData.startPoint = '河南省焦作市山阳区32号';
				this.formData.endPoint = '山阳区解放路66号';
			},
			// 跳转到救援记录页面
			goToRescueRecords() {
				uni.navigateTo({
					url: '/pages/rescue/rescue-records/rescue-records',
					success: () => {
						console.log('跳转到救援记录页面成功');
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			// 地图标记点击事件
			onMarkerTap(e) {
				console.log('点击了标记:', e.detail.markerId);
			},
			// 地图加载完成事件
			onMapLoad() {
				console.log('地图加载完成');
			},
			// H5端高德地图相关方法
			// #ifdef H5
			// 初始化高德地图
			initAmapMap() {
				// 检查是否已加载高德地图API
				if (window.AMap) {
					this.createAmapMap();
				} else {
					this.loadAmapScript();
				}
			},
			// 动态加载高德地图JavaScript API
			loadAmapScript() {
				const script = document.createElement('script');
				script.type = 'text/javascript';
				script.src = `https://webapi.amap.com/maps?v=1.4.15&key=cf14f6a5fb0c3a0287fb4199433c7bfde&callback=initAmapCallbackEmergency`;
				script.onerror = () => {
					console.error('高德地图API加载失败');
					uni.showToast({
						title: '地图加载失败',
						icon: 'none'
					});
				};
				document.head.appendChild(script);
				
				// 设置全局回调函数
				window.initAmapCallbackEmergency = () => {
					this.createAmapMap();
				};
			},
			// 创建高德地图实例
			createAmapMap() {
				try {
					// 创建地图实例
					this.amapInstance = new AMap.Map('amap-container-emergency', {
						zoom: this.mapData.scale,
						center: [this.mapData.longitude, this.mapData.latitude],
						viewMode: '3D',
						features: ['bg', 'road', 'building']
					});
					
					// 添加标记点
					this.addAmapMarkers();
					
					// 添加地图事件监听
					this.amapInstance.on('click', (e) => {
						console.log('地图点击:', e.lnglat);
					});
					
					console.log('高德地图初始化成功');
				} catch (error) {
					console.error('高德地图初始化失败:', error);
					uni.showToast({
						title: '地图初始化失败',
						icon: 'none'
					});
				}
			},
			// 添加高德地图标记点
			addAmapMarkers() {
				if (!this.amapInstance) return;
				
				// 清除现有标记
				this.amapInstance.clearMap();
				
				// 添加标记点
				this.mapData.markers.forEach(marker => {
					const amapMarker = new AMap.Marker({
						position: [marker.longitude, marker.latitude],
						title: marker.title,
						icon: new AMap.Icon({
							size: new AMap.Size(marker.width, marker.height),
							image: marker.iconPath,
							imageSize: new AMap.Size(marker.width, marker.height)
						})
					});
					
					// 添加点击事件
					amapMarker.on('click', () => {
						console.log('点击了标记:', marker.title);
						uni.showToast({
							title: marker.title,
							icon: 'none'
						});
					});
					
					this.amapInstance.add(amapMarker);
				});
			},
			// #endif
			
			// App端地图相关方法
			// #ifdef APP-PLUS
			// 初始化App端地图
			initAppMap() {
				console.log('App端地图初始化开始');
				// 检查地图数据
				if (!this.mapData || !this.mapData.latitude || !this.mapData.longitude) {
					console.error('地图数据不完整:', this.mapData);
					uni.showToast({
						title: '地图数据错误',
						icon: 'none'
					});
					return;
				}
				
				// 延迟初始化，确保DOM已渲染
				setTimeout(() => {
					console.log('App端地图数据:', this.mapData);
					// 这里可以添加App端特定的地图初始化逻辑
				}, 100);
			},
			// #endif
			// 拨打紧急电话
			callEmergency(type) {
				let number = '';
				let title = '';
				
				switch(type) {
					case 'traffic':
						number = '122';
						title = '交通事故';
						break;
					case 'fire':
						number = '119';
						title = '火警';
						break;
					case 'medical':
						number = '120';
						title = '急救中心';
						break;
					case 'police':
						number = '110';
						title = '公安报警';
						break;
				}
				
				uni.showModal({
					title: '紧急求助',
					content: `确定拨打${title}电话 ${number} 吗？`,
					success: (res) => {
						if (res.confirm) {
							// 这里可以调用拨打电话的API
							uni.showToast({
								title: `正在拨打${number}`,
								icon: 'none'
							});
						}
					}
				});
			},
			// 页面数据初始化
			initPageData() {
				// 获取用户信息
				this.getUserInfo();
				// 获取用户车型数据
				this.getUserVehicles();
				// 获取位置信息
				this.getLocationInfo();
				// 初始化地图数据
				this.initMapData();
			},
			// 获取用户信息
			getUserInfo() {
				// 后期从后端或本地存储获取用户信息
				// 这里先使用静态数据
				console.log('获取用户信息');
			},
			// 获取用户车型数据
			async getUserVehicles() {
				try {
					// 后期会替换为真实的API调用
					// const response = await this.$api.getUserVehicles();
					// this.userVehicles = response.data.map(vehicle => ({
					//     ...vehicle,
					//     displayText: `${vehicle.brand} ${vehicle.model} ${vehicle.year} (${vehicle.plateNumber})`
					// }));
					
					// 模拟API调用
					await new Promise(resolve => setTimeout(resolve, 500));
					
					// 设置默认选中第一个车型
					if (this.userVehicles.length > 0) {
						this.selectedVehicle = this.userVehicles[0];
						this.formData.vehicleId = this.userVehicles[0].id;
						this.formData.plateNumber = this.userVehicles[0].plateNumber;
					}
					
					console.log('获取用户车型数据成功');
				} catch (error) {
					console.error('获取用户车型数据失败:', error);
					uni.showToast({
						title: '获取车型数据失败',
						icon: 'none'
					});
				}
			},
			// 获取位置信息
			getLocationInfo() {
				// 后期从后端或GPS获取位置信息
				console.log('获取位置信息');
			},
			// 初始化地图数据
			initMapData() {
				// 后期从后端获取地图标记点
				console.log('初始化地图数据');
			},
			// 刷新页面数据
			refreshPageData() {
				// 后期从后端刷新数据
				console.log('刷新页面数据');
			}
		},
		// 生命周期
		onLoad() {
			this.initPageData();
		},
		onShow() {
			// 页面显示时刷新数据
			this.refreshPageData();
		},
		mounted() {
			// H5端：初始化高德地图
			// #ifdef H5
			this.initAmapMap();
			// #endif
			
			// App端：初始化地图
			// #ifdef APP-PLUS
			this.initAppMap();
			// #endif
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		position: relative;
		/* #ifdef H5 */
		padding-bottom: 140rpx; /* 为自定义TabBar留出空间 */
		/* #endif */
		/* #ifdef APP-PLUS */
		padding-bottom: 140rpx; /* 为自定义TabBar留出空间 */
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-bottom: 140rpx; /* 为自定义TabBar留出空间 */
		/* #endif */
	}

	/* 顶部状态栏和导航栏 */
	.header {
		background: linear-gradient(135deg, #3183FB 0%, #3183FB 100%);
		padding-top: var(--status-bar-height);
	}

	.status-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8rpx 30rpx;
		color: white;
		font-size: 24rpx;
	}

	.signal {
		display: flex;
		align-items: center;
		gap: 4rpx;
	}

	.signal-dot {
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		border: 1px solid white;
	}

	.signal-dot.filled {
		background-color: white;
	}

	.battery {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.battery-icon {
		width: 32rpx;
		height: 16rpx;
		border: 1px solid white;
		border-radius: 2rpx;
		position: relative;
	}

	.battery-icon::after {
		content: '';
		position: absolute;
		right: -4rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-left: 4rpx solid white;
		border-top: 4rpx solid transparent;
		border-bottom: 4rpx solid transparent;
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx 30rpx;
	}

	.nav-title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		flex: 1;
		text-align: center;
	}

	.nav-icon {
		width: 48rpx;
		height: 48rpx;
	}

	/* 地图区域 */
	.map-section {
		width: 100%;
		height: 500rpx;
		background-color: white;
	}

	.map-component {
		width: 100%;
		height: 100%;
	}
	
	/* App端地图特殊样式 */
	/* #ifdef APP-PLUS */
	.map-component {
		background-color: #f0f0f0;
		min-height: 500rpx;
	}
	/* #endif */

	/* 服务选择标签 */
	.service-tabs {
		display: flex;
		background-color: white;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #666;
		position: relative;
		transition: all 0.3s;
	}

	.tab-item.active {
		color: #667eea;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: #667eea;
		border-radius: 2rpx;
	}

	/* 表单区域 */
	.form-section {
		background-color: white;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.form-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
	}

	.form-label {
		width: 120rpx;
		flex-shrink: 0;
	}

	.label-btn {
		display: inline-block;
		padding: 12rpx 20rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: white;
		text-align: center;
		min-width: 95rpx;
		white-space: nowrap;
	}

	.label-btn.blue {
		background-color: #667eea;
	}

	.form-input {
		flex: 1;
		margin-left: 20rpx;
		margin-bottom: 10rpx;
	}

	.input-field {
		width: 100%;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
		border: none;
		box-sizing: border-box;
	}

	.textarea-field {
		width: 100%;
		height: 120rpx;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
		border: none;
		box-sizing: border-box;
		resize: none;
	}

	.select-field {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.select-text {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.select-arrow {
		font-size: 24rpx;
		color: #999;
		margin-left: 20rpx;
	}

	/* 呼叫救援按钮 */
	.call-rescue-section {
		background-color: white;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.call-rescue-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #6b8bff 0%, #517afe 100%);
		border: none;
		border-radius: 44rpx;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 30rpx rgba(255, 154, 158, 0.4);
	}

	.rescue-records {
		text-align: center;
		margin-top: 20rpx;
	}

	.records-link {
		color: #667eea;
		font-size: 26rpx;
	}

	/* 警务救助 */
	.police-assistance-section {
		background-color: white;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.emergency-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
	}

	.emergency-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
	}

	.emergency-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.emergency-icon.blue {
		background: linear-gradient(135deg, #e1edff 0%, #e1edff 100%);
	}

	.emergency-icon.orange {
		background: linear-gradient(135deg, #e1edff 0%, #e1edff 100%);
	}

	.emergency-icon.purple {
		background: linear-gradient(135deg, #e1edff 0%, #e1edff 100%);
	}

	.emergency-icon.teal {
		background: linear-gradient(135deg, #e1edff 0%, #e1edff 100%);
	}

	.emergency-img {
		width: 40rpx;
		height: 40rpx;
	}

	.emergency-label {
		font-size: 22rpx;
		color: #333;
		text-align: center;
	}

	.emergency-number {
		font-size: 24rpx;
		color: #667eea;
		font-weight: bold;
	}
</style>